<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19.Currying_function</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
    /*
    * 如果想接收到多个DOM元素上的值，要么为每个DOM元素绑定ref,要么为每个DOM元素绑定事件
    * 函数，后者如果对于多个DOM元素一样的逻辑也要定义多个函数，因为如果不定义多个函数的话，无法确定当前传来的DOM元素是哪个
    * 针对这个问题一种思路是如果我们函数只接收event参数不能区别当前DOM元素是哪个的话，那我们可以给函数传递第二个参数
    * 用以做出身份的区别，所以函数第一个是参数是event对象，第二个参数是DOM元素的识别
    * */

    class Form extends React.Component{
        state ={
            username: '',
            password: ''
        }

        handleFormData = (name,value)=>{
           /*注意这里的key是一个变量，所以要把通过[]进行引用*/
          this.setState({[name]:value})

        }

        submit = (event)=>{
            event.preventDefault();
            console.log(this.state.username,' ------- ',this.state.password)
        }



        render() {
            return (
                <div>
                    <form onSubmit={this.submit}>
                         {/*这种写法就相当于调用一个我们在class内定义的函数
                         这里只是将函数定义在事件内
                         之所以这样定义是因为定义在DOM元素中我们才能指定DOM函数的name
                         也就是说DOM函数的name必须由标签内传递过去
                         这样写相当于onclick的时候调用标签内的函数，标签内的函数执行调用class内定义的函数
                         */}
                        <input type="text" onChange={event => this.handleFormData("username",event.target.value)}/>
                        <input type="password" onChange={event => this.handleFormData("password",event.target.value)}/>
                        <button>登录</button>
                    </form>
                </div>
            );
        }
    }

    ReactDOM.render(<Form/>,document.getElementById("app"))

</script>
</body>
</html>